<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    show-checkbox
    ref="treeForm"
    node-key="id"
    default-expand-all
    check-strictly
    :highlight-current="true"
    :expand-on-click-node="false"
    @check-change="handleClick"
    @node-click="handleNodeClick"
    :default-checked-keys="[]"
  >
    <span class="slot-t-node" slot-scope="{ node }">
      <span>{{ node.label }}</span>
    </span>
  </el-tree>
</template>

<script>
export default {
  name: 'treeView',
  props: {
    treeData: {
      type: Array,
      request: true,
      default: () => []
    },
    defaultProps: {
      type: Object,
      request: true,
      default: () => ({children: 'children', label: 'name'})
    },
    checkChangedHandler: {
      type: Function,
      request: true,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    handleNodeClick(data) {
      this.$refs.treeForm.setCheckedNodes([data]);
    },
    handleClick(data, checked) {
      if (checked) {
        this.$refs.treeForm.setCheckedNodes([data])
        this.checkChangedHandler()
      }
    }
  }
}
</script>

<style scoped>

</style>
